<!-- begin:template: header label template-->
<ng-template #defaultHeadTemplate let-head="">
  <tr>
    <th *ngIf="head.showDetail" [style.width]="head.showDetailColumn.width" [style.text-align]="'center'" [style.padding]="'0'">
    </th>
    <th *ngIf="head.checkable" class="checkable-cell" [style.width]="head.checkableColumn.width" [style.padding]="'10px'">
      <d-checkbox [name]="'checkAll'" (change)="head.onCheckAllChange()" [(ngModel)]="head.pageAllChecked" [halfchecked]="head.halfChecked">
      </d-checkbox>
    </th>
    <th *ngFor="let column of head.columns; trackBy:trackByFn; let last = last" dResizeable [class.last-resize-header]="last" [resizeEnabled]="head.resizeable"
      [resizeBarRefElement]="head.resizeBarRefElement" [tableViewRefElement]="head.tableViewRefElement"
      [style.width]="column.width || ''" [minWidth]="column.minWidth" [maxWidth]="column.maxWidth" [ngStyle]="column.style"
      (resize)="head.onResize($event, column.field, true)">
      <ng-container *ngIf="column.nestedColumn && column.extraOptions?.showHeadTableToggler">
        <span class="devui-toggle-childtable" (click)="head.toggleChildrenTable()">
          <ng-container *ngIf="head.childrenTableOpen">
            <svg *ngIf="!column.extraOptions?.iconFoldTable" class="svg-icon-close-folder" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="h-closeFolder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path
                  d="M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M12,7 L4,7 L4,9 L12,9 L12,7 Z"
                  fill="#293040" fill-rule="nonzero"></path>
              </g>
            </svg>
            <span *ngIf="column.extraOptions?.iconFoldTable" [innerHTML]="column.extraOptions?.iconFoldTable | safe: 'html'"></span>
          </ng-container>
          <ng-container *ngIf="!head.childrenTableOpen">
            <svg *ngIf="!column.extraOptions?.iconUnFoldTable" class="svg-icon-open-folder" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="h-openFolder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path
                  d="M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M7,7 L4,7 L4,9 L7,9 L7,12 L9,12 L9,9 L12,9 L12,7 L9,7 L9,4 L7,4 L7,7 Z"
                   fill="#293040" fill-rule="nonzero"></path>
              </g>
            </svg>
            <span *ngIf="column.extraOptions?.iconUnFoldTable" [innerHTML]="column.extraOptions?.iconUnFoldTable | safe: 'html'"></span>
          </ng-container>
        </span>
      </ng-container>

      <ng-container *ngIf="!column.headCellTmpl?.template"><span [ngClass]="{'clickable': column.sortable}" (click)="head.onHeadClick(column)">{{column.header}}</span></ng-container>
      <ng-template *ngIf="column.headCellTmpl?.template" [ngTemplateOutlet]="column.headCellTmpl?.template" [ngTemplateOutletContext]="{column: column, $implicit: head}">
      </ng-template>

      <ng-container *ngIf="head.getIfExistMultiSort(column.field)">
        <span (click)="head.onHeadClick(column)" [ngClass]="{'clickable': column.sortable}">
          <i [style.position]="'relative'" class="datatable-svg" [style.overflow]="'hidden'" [style.color]="'#bbb'" *ngIf="head.getSortDirection(column.field) === '' && head.showSortIcon">
          <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
            <g id="order-default" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g >
                <path d="M4,7 L8,1 L12,7 L4,7 Z M12,9 L8,15 L4,9 L12,9 Z" id="形状"></path>
              </g>
            </g>
          </svg>
          </i>
          <i [style.position]="'relative'" class="datatable-svg svg-active" [style.overflow]="'hidden'" *ngIf="head.getSortDirection(column.field) === 'DESC'">
          <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="order-desc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g>
                <polygon id="Path-4" points="4 7 12 7 8 1"></polygon>
                <polygon id="Path-4-Copy"  transform="translate(8.000000, 12.000000) rotate(-180.000000) translate(-8.000000, -12.000000) "
                  points="4 15 12 15 8 9"></polygon>
              </g>
            </g>
          </svg>
          </i>
          <i [style.position]="'relative'" class="datatable-svg svg-active" [style.overflow]="'hidden'" *ngIf="head.getSortDirection(column.field) === 'ASC'">
            <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="order-asc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g>
                  <polygon id="Path-4" points="4 7 12 7 8 1"></polygon>
                  <polygon id="Path-4-Copy" transform="translate(8.000000, 12.000000) rotate(-180.000000) translate(-8.000000, -12.000000) "
                    points="4 15 12 15 8 9"></polygon>
                </g>
              </g>
            </svg>
          </i>
        </span>
      </ng-container>
      <ng-container *ngIf="head.canFilterable(column)" >
          <span dDropDown appendToBody [closeScope]="'blank'" (toggleEvent)="head.showfilterContent($event,column)" #filterDropdown="d-dropdown">
              <span dDropDownToggle class="icon-filter icon-filter-style"></span>
              <div dDropDownMenu *ngIf="!column.customFilterTemplate && column.filterMultiple"  [ngClass]="{'filter-content-hidden': head.isFilterHidden}">
                <ng-template [ngTemplateOutlet]="filterContentTmplForMultiple"
                [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
               </ng-template>
             </div>
             <div dDropDownMenu *ngIf="!column.customFilterTemplate && !column.filterMultiple"  [ngClass]="{'filter-content-hidden': head.isFilterHidden}">
              <ng-template [ngTemplateOutlet]="filterContentTmplForRadio"
              [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
             </ng-template>
           </div>
           <div dDropDownMenu *ngIf="column.customFilterTemplate">
            <ng-template [ngTemplateOutlet]="column.customFilterTemplate"
            [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
           </ng-template>
          </div>
          </span>
      </ng-container>
    </th>
  </tr>
</ng-template>
<!--end:tempate-->

<!-- begin:template: pager template-->
<ng-template #defaultPagerTemplate let-pager="pager" let-pagerPanel="">
  <d-pagination cssClass="table-pagination" [selectDirection]="pager.selectDirection" [total]="pager.total" [size]="pager.componentSize || 'sm'"
    [pageSize]="pager.pageSize" [maxItems]="pager.maxItems || pagerPanel.pagerMaxItems" [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pagerPanel.onPageChange($event)">
  </d-pagination>
</ng-template>
<!--end:tempate-->

<!-- begin:template: cell view, edit, filter template-->
<d-cell-template #textCellTemplate type="text">
  <d-cell>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cellItem="cellItem"
      let-cellValue="cellValue" let-cell="">
      <span [attr.title]="cellValue | disPlayCellValuePipe:cellItem:column">{{cellValue | disPlayCellValuePipe:cellItem:column}}</span>
    </ng-template>
  </d-cell>

  <d-cell-edit>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cell="">
      <form class="form-inline edit-padding-fix">
        <div class="devui-form-group full-width">
            <div class="devui-input-group full-width">
              <input [dAutoFocus]="cell && cell.isCellEdit" [type]="column.fieldType" class="devui-form-control" [name]="column.field" [(ngModel)]="rowItem[column.field]" (keydown.enter)="cell && cell.onFinishCellEdit($event)"
              [placeholder]="column.placeholder || ''" />
            </div>
        </div>
      </form>
    </ng-template>
  </d-cell-edit>

  <d-cell-filter>
    <ng-template let-head="" let-column="column">
      <input [type]="column.fieldType" class="devui-form-control search" [(ngModel)]="head.searchQuery[column.field]" [name]="column.field"
        (keydown.enter)="head.onSearchQueryChange()" (change)="head.onSearchQueryChange()" />
    </ng-template>
  </d-cell-filter>

</d-cell-template>

<d-cell-template #numberCellTemplate type="number">
  <d-cell-filter>
    <ng-template let-head="" let-column="column">
      <form>
        <div class="row">
          <div class="col-xs-12 col-sm-6">
            <input type="number" class="devui-form-control search" placeholder="From" [(ngModel)]="head.searchQuery['ge$$' + column.field]"
              [name]="column.field + '_min'" (keydown.enter)="head.onSearchQueryChange()" (change)="head.onSearchQueryChange()"
            />
          </div>
          <div class="col-xs-12 col-sm-6">
            <input type="number" class="devui-form-control search" placeholder="To" [(ngModel)]="head.searchQuery['le$$' +column.field]" [name]="column.field +'_max'"
              (keydown.enter)="head.onSearchQueryChange()" (change)="head.onSearchQueryChange()" />
          </div>
        </div>
      </form>
    </ng-template>
  </d-cell-filter>
  <d-cell-edit>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column">
      <div class="edit-padding-fix" [style.display]="'inline-block'">
        <d-input-number [min]="column.extraOptions?.min || 0" [max]="column.extraOptions?.max || 100" [step]="column.extraOptions?.step || 1"
          [(ngModel)]="rowItem[column.field]"></d-input-number>
      </div>
    </ng-template>
  </d-cell-edit>
</d-cell-template>

<d-cell-template #telCellTemplate type="tel">
  <d-cell>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cellItem="cellItem"
      let-cellValue="cellValue">
      <a [href]="'tel:' + cellValue" (click)="stopPropagation($event)">{{cellValue}}</a>
    </ng-template>
  </d-cell>

</d-cell-template>

<d-cell-template #mailCellTemplate type="mail">
  <d-cell>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cellItem="cellItem"
      let-cellValue="cellValue">
      <a [href]=" cellValue ? ('mailto:' + cellValue) : ''" (click)="stopPropagation($event)">{{cellValue}}</a>
    </ng-template>
  </d-cell>

</d-cell-template>

<d-cell-template #imageCellTemplate type="image">
  <d-cell>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cellItem="cellItem"
      let-cellValue="cellValue">
      <img class="img-responsive" [src]="cellValue" [attr.alt]="cellValue">
    </ng-template>
  </d-cell>

  <d-cell-edit>
    <ng-template>
      <strong>You need customise edit template!</strong>
    </ng-template>
  </d-cell-edit>

  <d-cell-filter>

  </d-cell-filter>

</d-cell-template>

<d-cell-template #selectCellTemplate type="select">
  <d-cell-edit>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cell="">
      <div class="edit-padding-fix">
        <d-select *ngIf="column.extraOptions?.optionTemplate" [filterKey]="column.extraOptions?.filterKey" [(ngModel)]="rowItem[column.field]" (selectBlur)="cell && cell.onFinishCellEdit()"
          [options]="column.extraOptions?.source" [isSearch]="column.extraOptions?.isSearch" [placeholder]="column.placeholder || ''"
          [autoFocus]="cell && cell.isCellEdit" [toggleOnFocus]="true" [appendToBody]="true" [multiple]="column.extraOptions?.multiple"
          [extraConfig]="column.extraOptions" (valueChange)="!column.extraOptions?.multiple && cell && cell.onFinishCellEdit()"
          [width]="column.extraOptions?.width" [searchFn]="column.extraOptions?.searchFn">
          <ng-template let-option="option" let-filterKey="filterKey" let-position="position" let-checked="checked">
            <ng-template [ngTemplateOutlet]="column.extraOptions?.optionTemplate"
              [ngTemplateOutletContext]="{option: option, filterKey: filterKey, position: position, checked: checked}">
            </ng-template>
          </ng-template>
        </d-select>
        <d-select *ngIf="!column.extraOptions?.optionTemplate" [filterKey]="column.extraOptions?.filterKey" [(ngModel)]="rowItem[column.field]" (selectBlur)="cell && cell.onFinishCellEdit()"
          [options]="column.extraOptions?.source" [isSearch]="column.extraOptions?.isSearch" [placeholder]="column.placeholder || ''"
          [autoFocus]="cell && cell.isCellEdit" [toggleOnFocus]="true" [appendToBody]="true" [multiple]="column.extraOptions?.multiple"
          [extraConfig]="column.extraOptions" (valueChange)="!column.extraOptions?.multiple && cell && cell.onFinishCellEdit()"
          [width]="column.extraOptions?.width" [searchFn]="column.extraOptions?.searchFn">
        </d-select>
      </div>
    </ng-template>
  </d-cell-edit>
</d-cell-template>

<d-cell-template #dateCellTemplate type="date">
  <d-cell-edit>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cell="">
      <form class="form-inline edit-padding-fix">
        <div class="devui-form-group">
          <div class="devui-input-group">
            <input class="devui-form-control search" [name]="column.field" [(ngModel)]="rowItem[column.field]" dDatepicker appendToBody [dateFormat]="column.extraOptions?.dateFormat"
              #datePicker="datepicker" (ngModelChange)="!column.extraOptions?.showTime && cell && cell.onFinishCellEdit()" [placeholder]="column.placeholder || ''" [autoOpen]="true"
              [showTime]="column.extraOptions?.showTime">
            <div class="devui-input-group-addon" (click)="datePicker.toggle($event, true)">
              <i class="icon icon-calendar"></i>
            </div>
          </div>
        </div>
      </form>
    </ng-template>
  </d-cell-edit>

</d-cell-template>

<d-cell-template #treeSelectCellTemplate type="treeSelect">
  <d-cell-edit>
    <ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cell="">
      <div class="edit-padding-fix">
        <d-tree-select [style.width]="'100%'" [placeholder]="column.extraOptions?.placeholder||''" [treeData]="column.extraOptions?.source" [width]="column.extraOptions?.width"
          [disabled]="column.extraOptions?.disabled" [multiple]="column.extraOptions?.multiple" [treeNodeIdKey]="column.extraOptions?.treeNodeIdKey || 'id'"
          [treeNodeChildrenKey]="column.extraOptions?.treeNodeChildrenKey || 'children'" [disabledKey]="column.extraOptions?.disabledKey || 'disabled'" [leafOnly]="column.extraOptions?.leafOnly"
          [delimiter]="column.extraOptions?.delimiter || ', '" [iconParentOpen]="column.extraOptions?.iconParentOpen || DefaultIcons?.iconParentOpen"
          [iconParentClose]="column.extraOptions?.iconParentClose || DefaultIcons?.iconParentClose" [iconLeaf]="column.extraOptions?.iconLeaf || DefaultIcons?.iconLeaf"
          [closeOnNodeSelected]="column.extraOptions?.closeOnNodeSelected||true" (valueChanged)="!column.extraOptions?.multiple && cell && cell.onFinishCellEdit()"
          [expandTree]="column.extraOptions?.expandTree" [(ngModel)]="rowItem[column.field]" [onReady]="treeSelectInit(column.extraOptions?.autoOpen)"
          [treeNodeTitleKey]="column.extraOptions?.treeNodeTitleKey" appendTo="body" [allowUnselect]="column.extraOptions?.allowUnselect!==undefined?column.extraOptions?.allowUnselect:true"
          iconTemplatePosition="after-checkbox">
          <ng-template #iconTemplate let-node="node">
            <ng-template [ngTemplateOutlet]="column.extraOptions?.iconTemplate"
              [ngTemplateOutletContext]="{node: node}">
            </ng-template>
          </ng-template>
        </d-tree-select>
      </div>
    </ng-template>
  </d-cell-edit>
</d-cell-template>

  <ng-template let-head="" let-rows="rows" #AdvancedHeadTmpl>
  <tr *ngFor="let rowContex of rows;let rowIndex = index">
    <th *ngIf="head.showDetail && rowIndex === 0" [style.width]="head.showDetailColumn.width" [style.text-align]="'center'" [style.padding]="'0'" [attr.rowspan]="rows?.length || 1"></th>
    <th *ngIf="head.checkable && rowIndex === 0" class="checkable-cell" [style.width]="head.checkableColumn.width" [style.padding]="'10px'"  [attr.rowspan]="rows?.length || 1">
      <d-checkbox [name]="'checkAll'" (change)="head.onCheckAllChange()" [(ngModel)]="head.pageAllChecked" [halfchecked]="head.halfChecked">
      </d-checkbox>
    </th>
    <ng-container *ngFor="let column of head.columns; trackBy:trackByFn; let colIndex = index ;let last = last">
    <th *ngIf="column.advancedHeader && column.advancedHeader[rowIndex]?.rowspan && column.advancedHeader[rowIndex]?.colspan"
      dResizeable [class.last-resize-header]="last" [resizeEnabled]="head.resizeable  && rowIndex === (column.advancedHeader.length - 1)"
      [resizeBarRefElement]="head.resizeBarRefElement" [tableViewRefElement]="head.tableViewRefElement" [ngClass]="{'clickable': column.sortable}"
      [style.width]="rowIndex === (column.advancedHeader.length - 1) ? column.width : column.advancedHeader[rowIndex]['$width']"
      [ngStyle]="column.style" (resize)="head.onResize($event, column.field, true); head.resizeParent(column);"
      [attr.rowspan]="column.advancedHeader[rowIndex]?.rowspan" [attr.colspan]="column.advancedHeader[rowIndex]?.colspan"
      [style.textAlign] = "!column.style && rowIndex !== (column.advancedHeader.length - 1) &&
                            (column.advancedHeader[rowIndex]?.rowspan > 0 || column.advancedHeader[rowIndex]?.colspan> 0 ) ? 'center' : ''"
      >

      <ng-container *ngIf="!column.headCellTmpl?.template">
        <span (click)="rowIndex === (column.advancedHeader.length - 1) && head.onHeadClick(column)">
          {{column.advancedHeader[rowIndex].header}}
          </span>
      </ng-container>
      <ng-template *ngIf="column.headCellTmpl?.template" [ngTemplateOutlet]="column.headCellTmpl?.template" [ngTemplateOutletContext]="{column: column, $implicit: head , rowIndex: rowIndex, colIndex: colIndex}">
      </ng-template>

      <ng-container *ngIf="head.getIfExistMultiSort(column.field) && rowIndex === (column.advancedHeader.length - 1)">
        <span (click)="head.onHeadClick(column)">
          <i [style.position]="'relative'" class="datatable-svg" [style.overflow]="'hidden'" [style.color]="'#bbb'" *ngIf="head.getSortDirection(column.field) === '' && head.showSortIcon">
          <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
            <g id="order-default" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g>
                <path d="M4,7 L8,1 L12,7 L4,7 Z M12,9 L8,15 L4,9 L12,9 Z" id="形状"></path>
              </g>
            </g>
          </svg>
          </i>
          <i [style.position]="'relative'" class="datatable-svg svg-active" [style.overflow]="'hidden'" *ngIf="head.getSortDirection(column.field) === 'DESC'">
            <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="order-desc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g>
                  <polygon id="Path-4" points="4 7 12 7 8 1"></polygon>
                  <polygon id="Path-4-Copy" transform="translate(8.000000, 12.000000) rotate(-180.000000) translate(-8.000000, -12.000000) "
                    points="4 15 12 15 8 9"></polygon>
                </g>
              </g>
            </svg>
          </i>
          <i [style.position]="'relative'" class="datatable-svg svg-active" [style.overflow]="'hidden'" *ngIf="head.getSortDirection(column.field) === 'ASC'">
            <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="order-asc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g>
                  <polygon id="Path-4" points="4 7 12 7 8 1"></polygon>
                  <polygon id="Path-4-Copy" transform="translate(8.000000, 12.000000) rotate(-180.000000) translate(-8.000000, -12.000000) "
                    points="4 15 12 15 8 9"></polygon>
                </g>
              </g>
            </svg>
          </i>
        </span>
      </ng-container>
      <ng-container *ngIf="head.canFilterable(column) && rowIndex === (column.advancedHeader.length - 1)" >
          <span dDropDown appendToBody [closeScope]="'blank'" (toggleEvent)="head.showfilterContent($event,column)" #filterDropdown="d-dropdown">
              <span dDropDownToggle class="icon-filter icon-filter-style"></span>
             <div dDropDownMenu *ngIf="!column.customFilterTemplate && column.filterMultiple"  [ngClass]="{'filter-content-hidden': head.isFilterHidden}">
                <ng-template [ngTemplateOutlet]="filterContentTmplForMultiple"
                [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
               </ng-template>
             </div>
             <div dDropDownMenu *ngIf="!column.customFilterTemplate && !column.filterMultiple"  [ngClass]="{'filter-content-hidden': head.isFilterHidden}">
              <ng-template [ngTemplateOutlet]="filterContentTmplForRadio"
              [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
             </ng-template>
           </div>
           <div dDropDownMenu *ngIf="column.customFilterTemplate">
            <ng-template [ngTemplateOutlet]="column.customFilterTemplate"
            [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
           </ng-template>
         </div>
          </span>
      </ng-container>
    </th>
    <th *ngIf="!column.advancedHeader && rowIndex === 0" dResizeable [class.last-resize-header]="last" [resizeEnabled]="head.resizeable"
      [resizeBarRefElement]="head.resizeBarRefElement" [tableViewRefElement]="head.tableViewRefElement" [ngClass]="{'clickable': column.sortable}"
      [style.width]="column.width || ''" [minWidth]="column.minWidth" [maxWidth]="column.maxWidth" [ngStyle]="column.style"
      (resize)="head.onResize($event, column.field, true)" [attr.rowspan]="rows?.length || 1">

      <ng-container *ngIf="!column.headCellTmpl?.template"><span (click)="head.onHeadClick(column)">{{column.header}}</span></ng-container>
      <ng-template *ngIf="column.headCellTmpl?.template" [ngTemplateOutlet]="column.headCellTmpl?.template" [ngTemplateOutletContext]="{column: column, $implicit: head, rowIndex: rowIndex, colIndex: colIndex}">
      </ng-template>

      <ng-container *ngIf="head.getIfExistMultiSort(column.field)">
        <span (click)="head.onHeadClick(column)">
          <i [style.position]="'relative'" class="datatable-svg" [style.overflow]="'hidden'" [style.color]="'#bbb'" *ngIf="head.getSortDirection(column.field) === '' && head.showSortIcon">
          <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
            <g id="order-default" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g>
                <path d="M4,7 L8,1 L12,7 L4,7 Z M12,9 L8,15 L4,9 L12,9 Z" id="形状"></path>
              </g>
            </g>
          </svg>
          </i>
          <i [style.position]="'relative'" class="datatable-svg svg-active" [style.overflow]="'hidden'" *ngIf="head.getSortDirection(column.field) === 'DESC'">
            <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="order-desc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g>
                  <polygon id="Path-4" points="4 7 12 7 8 1"></polygon>
                  <polygon id="Path-4-Copy" transform="translate(8.000000, 12.000000) rotate(-180.000000) translate(-8.000000, -12.000000) "
                    points="4 15 12 15 8 9"></polygon>
                </g>
              </g>
            </svg>
          </i>
          <i [style.position]="'relative'" class="datatable-svg svg-active" [style.overflow]="'hidden'" *ngIf="head.getSortDirection(column.field) === 'ASC'">
            <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="order-asc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g>
                  <polygon id="Path-4" points="4 7 12 7 8 1"></polygon>
                  <polygon id="Path-4-Copy" transform="translate(8.000000, 12.000000) rotate(-180.000000) translate(-8.000000, -12.000000) "
                    points="4 15 12 15 8 9"></polygon>
                </g>
              </g>
            </svg>
          </i>
        </span>
      </ng-container>
      <ng-container *ngIf="head.canFilterable(column)" >
          <span dDropDown #filterDropdown="d-dropdown" appendToBody [closeScope]="'blank'"  (toggleEvent)="head.showfilterContent($event,column)">
              <span dDropDownToggle class="icon-filter icon-filter-style"></span>
              <div dDropDownMenu *ngIf="!column.customFilterTemplate && column.filterMultiple"  [ngClass]="{'filter-content-hidden': head.isFilterHidden}">
                <ng-template [ngTemplateOutlet]="filterContentTmplForMultiple"
                [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
               </ng-template>
             </div>
             <div dDropDownMenu *ngIf="!column.customFilterTemplate && !column.filterMultiple"  [ngClass]="{'filter-content-hidden': head.isFilterHidden}">
              <ng-template [ngTemplateOutlet]="filterContentTmplForRadio"
              [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
             </ng-template>
           </div>
           <div dDropDownMenu *ngIf="column.customFilterTemplate">
            <ng-template [ngTemplateOutlet]="column.customFilterTemplate"
            [ngTemplateOutletContext]="{$implicit: head , filterListDisplay:head.filterListDisplay,column:head.columnForFilter, dropdown:filterDropdown}">
           </ng-template>
         </div>
          </span>
      </ng-container>
    </th>
    </ng-container>
    <!-- <th width="0"  *ngIf="head.resizeable"></th> -->
  </tr>
  </ng-template>
  <ng-template #filterContentTmplForMultiple let-filterListMultiple="filterListDisplay" let-head="" let-column="column" let-dropdown="dropdown">
      <div class="filter-content filter-bg filter-font-color">
        <div>
          <d-search style="width:100%" [placeholder]="placeholder" (searchFn)="head.searchForFilter($event)">
          </d-search>
        </div>
        <div class="filter-options">
          <d-checkbox [label]="checkAll" (change)="head.checkAll($event)" [halfchecked]="head.filterHalfChecked"
            [(ngModel)]="head.filterAllChecked">
          </d-checkbox>
          <div class="line"></div>
          <div class="checkbox-container devui-scrollbar">
            <div *ngFor="let item of filterListMultiple" class="checkbox-group">
              <d-checkbox [label]="item.name" [(ngModel)]="item.checked" (change)="head.checkboxChange($event)">
              </d-checkbox>
             </div>
          </div>
        </div>
        <div class="line"></div>
        <div style="text-align: center">
        <span class="button-style" (click)="head.getFilterDataMultiple(column);closeFilter(dropdown)">确认</span>
        </div>
      </div>
  </ng-template>
  <ng-template #filterContentTmplForRadio let-filterListRadio="filterListDisplay" let-head="" let-column="column" let-dropdown="dropdown">
    <div class="filter-content filter-bg filter-font-color">
      <div class="filter-options" role="menu">
        <div role="menuitem">
          <d-search style="width:100%" [placeholder]="placeholder" (searchFn)="head.searchForFilter($event)">
          </d-search>
        </div>
        <div class="checkbox-container devui-scrollbar" role="menuitem" >
          <div *ngFor="let item of filterListRadio" class="drop-down-item" [ngClass]="{'filter-item-active': head.choosedItem === item}"
               (click)="head.getFilterDataRadio(item,column);closeFilter(dropdown)">{{item.name}}</div>
        </div>
      </div>
    </div>
</ng-template>

<!--end:tempate-->
